<template>
    <div>
        <!-- 头部 -->
        <app-header />
        <!-- 中间内容 -->
        <app-main />
        <!-- 页尾内容 -->
        <app-foot />
    </div>
</template>

<script>
// 引入头部组件
import AppHeader from "@/components/APPHeader"
// 引入中间内容组件
import AppMain from "@/components/APPMain"
// 引入页尾内容组件
import AppFoot from "@/components/APPFoot"

export default {
    components: {
        AppHeader,
        AppMain,
        AppFoot
    }
}
</script>

<style scoped>
.header{
    position: absolute;
    line-height: 70px;
    top: 0px;
    width: 1440px;
    background-color: #1f5c9d;
}
.main{
    position: absolute;
    top: 70px;
    width: 1440px;
    bottom: 27px;
    /* 实现内容撑开出现滚动条 */
    overflow-y: auto;
}
.foot{
    position: absolute;
    height: 25px;
    width: 1440px;
    bottom: 0px;
    background-color: #F5F5DC;
}
</style>